<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src='jquery-3.1.0.js'></script>
    <script src="change.js"></script>
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: #fff;
        }

        #wrap {
            width: 1100px;
            height: 600px;
            margin: 50px auto;

            position: relative;
        }

        .ppt-box {
            width: 960px;
            height: 540px;
            border: 1px solid black;
            position: relative;
            margin: 0 auto;
        }

        .ppt-box div {
            width: 960px;
            height: 540px;
            position: absolute;
            background-size: 100% 100%;
            opacity: 0;
        }

        #p1 {
            background-image: url(01.jpg);
            opacity: 1;
        }

        .p2 {
            background-image: url(02.jpg);
        }

        .p3 {
            background-image: url(03.jpg);
        }

        .p4 {
            background-image: url(04.jpg);
        }

        .p5 {
            background-image: url(05.jpg);
        }

        .dot {
            width: 300px;
            height: 20px;
            z-index: 1000;
            position: absolute;
            bottom: 80px;
            left: 0;
            right: 0;
            margin: auto;
        }

        .dot li {
            float: left;
            list-style: none;
            width: 12px;
            height: 12px;
            display: block;
            border: 2px solid white;
            border-radius: 50%;
            margin-left: 40px;
            box-sizing: border-box;
        }

        .active {
            background-color: #ff6700;
            transition: 0.2s linear;
        }

        .prev {
            position: absolute;
            height: 80px;
            opacity: 0;
            top: 225px;
        }

        .next {
            height: 80px;
            right: 0;
            position: absolute;
            top: 225px;
            opacity: 0;
        }

        #wrap:hover .cut {
            opacity: 1;
            transition: 0.5s linear;
        }
    </style>
</head>

<body>
<div id="wrap">
    <img src="prev.png" class="prev cut" alt="">
    <div class="ppt-box">
        <div id="p1" class="ppt">1</div>
        <div class="p2 ppt"></div>
        <div class="p3 ppt"></div>
        <div class="p4 ppt"></div>
        <div class="p5 ppt"></div>
    </div>
    <img src="next.png" class="next cut" alt="">
    <ul class="dot">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>


<script>
    var a = {
        transition: '0.5s linear',
        speed: 3000
    }
    $.change(a);
</script>
</body>
</html>